import { Typography } from '@mui/material';
import { useEffect, useState } from 'react';

import TokenManager, { TokenPrice } from '../../api/token/token-manager';
import { TokenPerformanceRow } from './token-performance-row';

export const TokenPerformance = () => {
    const [tokenPrices, setTokenPrices] = useState<Array<TokenPrice>>();

    useEffect(() => {
        TokenManager.getPerformace().then((tokenPrices: Array<TokenPrice>) => {
            setTokenPrices(tokenPrices);
        });
    }, []);

    return (
        <>
            <Typography variant="h4" sx={{ color: '#BCB6E9', pb: 2 }}>
                Token Performance
            </Typography>

            {tokenPrices &&
                tokenPrices.map((tokenPrice: TokenPrice) => {
                    return <TokenPerformanceRow key={tokenPrice.name} tokenPrice={tokenPrice} />;
                })}
        </>
    );
};
